<template>
    <view 
        class="goods-lists" 
        :class="{
        'goods-lists-larger': content.style == 1,
        'goods-lists-perline': content.style == 2 || content.style == 5,
        'goods-lists-swiper': content.style == 3,
        'goods-lists-lists': content.style == 4
    }">
        <view 
            class="goods-wrap" 
            :class="[`goods-wrap-style-${content.style}`]" 
            v-for="(item, index) in goods" 
            :key="index" 
            @tap="navigate(item)"
        >
            <view 
                class="goods-item" 
                :style="{
                    'background-color': styles.bg_color, 
                    'margin': `${$px2rpx(styles.goods_margin /2)}rpx`, 
                    'padding': `${$px2rpx(styles.goods_padding /2)}rpx`, 
                    'border-radius': `${$px2rpx(styles.goods_border_radius)}rpx`
                }"
            >
                <view>
                    <view v-if="content.show_title" class="m-b-8 goods-info-row1" :style="{
                                color: styles.title_color
                            }">
                        <view class="title-info" :class="content.style==3 ? 'line-1' : 'line-2'">
                            
                            <view class="title-info-label">信息</view>
                            <view class="title-info-title">{{item.name}}</view>
                        </view>
                       
                    </view>
                </view>
                
                <view class="goods-image">
                    <view class="u-image">
                        <u-image :src="item.image" width="100%" height="100%" />
                    </view>
                </view>
                <view class="goods-info p-10">
                    <!-- <view v-if="content.show_title" class="m-b-8 goods-info-row1" :style="{
                                color: styles.title_color
                            }">
                        <view :class="content.style==3 ? 'line-1' : 'line-2'">
                            <text 
                                v-if="content.show_tag" 
                                class="goods-info-tag " 
                                :class="[index % 2 == 0 ? 'goods-info-tag-new' : 'goods-info-tag-hot']">
                                {{ index % 2 == 0 ? '最新' : '热卖'}}
                            </text>
                            <text>{{item.name}}</text>
                            
                        </view>
                    </view> -->
                    <view class="flex price-btn goods-info-row2 flex-wrap">
                        <!-- && content.style != 5 -->
                        <view class="flex-1 flex col-baseline" v-if="content.style != 2">
                            <view v-if="content.show_price" class="price weight-bold m-r-10">
                                <price :content="item.sell_price" :color="styles.price_color" :font-weight="500"
                                    mainSize="34rpx" minorSize="26rpx" />
                            </view>
                            <view v-if="content.show_scribing_price">
                                <!--   v-if="Number(item.lineation_price)" -->
                                <price 
                                    :content="item.lineation_price" 
                                    color="#999999" 
                                    mainSize="21rpx"
                                    minorSize="21rpx" 
                                    :line-through="true"
                                    suffix="元"
                                >
                                    <view slot="prefix">
                                        <text >原价:</text>
                                    </view>
                                </price>
                            </view>
                        </view>
                        <view class="store-num">已售:{{ item.sales_num }}</view>
                        <!-- 
                         || content.style == 5
                         -->
                        <view class="" v-if="content.style == 2">
                            <view class="m-t-10" v-if="content.show_scribing_price">
                                <price 
                                    :content="item.lineation_price" 
                                    color="#999999" 
                                    mainSize="26rpx"
                                    minorSize="26rpx" 
                                    :line-through="true" 
                                >
                                    <view slot="prefix">
                                        <text style="margin-right: 10rpx;">原价</text>
                                    </view>
                                </price>
                                
                            </view>
                            <view class="price weight-bold m-t-10 m-r-10">
                                <price :content="item.sell_price" :color="styles.price_color" :font-weight="700"
                                    mainSize="34rpx" minorSize="26rpx" >
                                    <view slot="content-label">
                                        <text class="membership-price-label">会员价</text>
                                    </view>
                                    <view slot="prefix">
                                        
                                        <text class="membership-price-unit">￥</text>
                                    </view>
                                </price>
                            </view>
                            
                        </view>
                        <view class="buy-btn xs"
                            v-if="content.show_btn && ( content.style == 1 || content.style == 4)"
                            :style="[btnStyle]">
                            {{content.btn_text}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script type="text/javascript">
	export default {
		components: {},
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {}
		},
		methods: {
			navigate(item) {
				this.$Router.push({
					path: '/pages/goods_detail/goods_detail',
					query: {
						id: item.id
					}
				})
			}
		},
		computed: {

			goods() {
				const {
					data
				} = this.content
				return data.length ? data : []
			},
			btnStyle() {
				const {
					btn_bg_color,
					btn_color,
					btn_border_radius,
					btn_border_color
				} =
				this.styles
				const style = {
					"background-color": btn_bg_color,
					color: btn_color,
					'border-radius': `${this.$px2rpx(btn_border_radius)}rpx`,
					'border-color': btn_border_color,
				}
				return style
			}
		}
	};
</script>
<style lang="scss" scoped>
	.goods-group-card {
		.goods-lists {
			overflow: hidden;
			
		}
		.goods-wrap {
			overflow: hidden;
		
			.goods-item {
				overflow: hidden;
				display: flex;
				flex-direction: column;
				position: relative;
				transform: translateY(0);
				
			}
			.goods-image {
				position: relative;
				width: 100%;
				// padding-top: 100%;
				box-sizing: border-box;
			}
			.u-image {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 100%;
			}
			.goods-info {
				flex: 1;
			}
			.buy-btn {
				flex: none;
				@include background_color() padding: 4rpx 32rpx;
				color: #fff;
				border-radius: 4rpx;
				border: 1px solid transparent;
			}
				
			.goods-info-row1 {
				color: #333333;
			}
				
			.price {
				@include font_color();
			}
		}
		.goods-lists-larger {
            .title-info {
                display: flex;
                margin-right: 10rpx;
                height: 40rpx;
                align-items: center;
            }
            .title-info-label {
                background-color: #a5a5a5;
                border-radius: 4rpx;
                text-align: center;
                width: 60rpx;
                color: #ffffff;
                height: 28rpx;
                line-height: 28rpx;
                font-size: 20rpx;
            }
            .title-info-title {
                padding: 0rpx 14rpx;
                font-size: 26rpx;
                width: 600rpx;
                line-height: 36rpx;
                color: #999999;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .store-num {
                color: #4C4948;
                font-size: 24rpx;
            }
			.goods-info {
				padding: 10px;
			}
					
			.goods-image {
				padding-top: 46%;
			}
            
		}
		.goods-lists-perline {
			display: flex;
			flex-wrap: wrap;
		
			.goods-wrap {
				width: 50%;
			}
            .goods-wrap-style-5 {
                width: 33%;
            }
			.goods-info-row1 {
				line-height: 36rpx;
				// height: 72rpx;
			}
			.membership-price-label {
				display: inline-block;
				padding: 4rpx;
				margin-right: 6rpx;;
				font-size:12px;
				font-weight: 400;
				color: #E60000;
				border: 1px solid #E60000;
				border-radius: 3px;
				vertical-align: middle;
			}
			.membership-price-value {
				display: inline-block;
				font-size: 17px;
				font-weight: 700;
				color: #E60000;
			}
			.membership-price-unit {
				display: inline-block;
				font-weight: 700;
				color: #E60000;
				font-size: 12px;
				color: #E60000;
			}
		}
		.goods-lists-swiper {
			overflow-x: auto;
			overflow-y: hidden;
			display: flex;
			.goods-wrap {
				flex: 0 0 36%;
				width: 36%;
			}
		}
		.goods-lists-lists {
			
			.goods-item {
				flex-direction: row;
			}
			.goods-image {
				width: 240rpx;
				padding-top: 240rpx;
			}
				
			.goods-info {
				position: relative;
				padding: 10px;
			}
			.price-btn {
				position: absolute;
				right: 20rpx;
				left: 20rpx;
				bottom: 20rpx;
			}
		}
	}
</style>

<style lang="scss" scoped>
.widgets-goods-group-card {
    box-shadow: 4px 2px 2px #ddd;
    .goods-info-tag {
        display: inline-block;
        width: 40px;
        padding: 0 6px;
        margin-right: 5px;
        text-align: center;
        vertical-align: middle;
        font-size: 10px;
        border-radius: 999px;
        color: #fff;
        background: #E60000;

    }
    .goods-info-tag-new {
        background: #ff8200;
    }
    .goods-info-tag-hot {
        background: #E60000;
    }
    .goods-lists-perline {
        
    }
}
</style>
